<template>
  <el-container class="innerContent">
    <Menu :isCollapse="isCollapse" />
    <el-container class="page-right">
      <el-header class="page-header">
        <div class="head-left">
          <CollapseSide :changeSide="changeSide" :isCollapse="isCollapse" />
          <PageHeader />
        </div>
        <Header />
      </el-header>
      <el-main class="main">
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import Menu from 'Components/Menu/Menu.vue';
import Header from 'Components/Header/index.vue'
import { defineAsyncComponent, ref } from 'vue';
import moment from 'moment';
import router from '../../router';

//页头
const PageHeader = defineAsyncComponent(() => import('Components/PageHeader/pageHeader.vue'));
const CollapseSide = defineAsyncComponent(() => import('Components/CollapseSide/CollapseSide.vue'));
console.log('时间', moment().format('YYYY-MM-DD HH:mm:ss'));

console.log('home', router);
//展开收缩
const isCollapse = ref(false);

const changeSide = () => {
  isCollapse.value = !isCollapse.value;
}

</script>

<style lang="less" scoped>
@import url("./home.less");
</style>